<template>
	<view>
		<view class="loding" v-if="moneyValue">
			<text>支付中...</text>
		</view>
		<view class="container" v-else>
			<view class="head">
				<view class="image">
					<image :src="data.logo" mode="aspectFit"></image>
				</view>
				<view class="title">
					<view class="name">{{data.name}}</view>
					<view class="info">
						<view class="icon" v-if="data.title">门店</view>
						<view class="text">{{data.title}}</view>
					</view>
				</view>
			</view>

			<view class="pay">
				<view class="fk">付款金额（元）</view>
				<view style="display: flex; height: 80rpx; margin-top: 30rpx ; align-items: flex-end;">
					<view style="display: flex;align-items: end; font-size: 22px;margin-bottom: 4rpx;">￥</view>
					<view style="font-size: 30px; width: 95%;">{{money}}</view>
					<!-- <input v-model="money" type="number" class="input1" cursor-color="#2979ff" auto-focus /> -->
				</view>
				<view class="hr"></view>
				<view v-if="!order" class="input-bz">
					<textarea auto-height maxlength='100' class="Input" v-model="notes" type="text"
						placeholder-class="text" placeholder="添加备注(100字以内)" @focus="hidKey" @blur="getKey" />
				</view>
				<view v-else class="orderID">
					订单编号：{{order}}
				</view>
			</view>

			<view class="pop" v-if="key">
				<custom-keyboard :disabled="butdsb" v-if="!moneyValue" v-model:value="money" type="digit" focus
					@confirm="pay()"></custom-keyboard>
				<view class="noPop" v-else>
					<button :disabled="butdsb" class="bottoms" hover-class="bottoms-hover" hover-start-time="1"
						hover-stay-time="100" @click="pay()">
						<text v-if="!butdsb">确认支付</text>
						<text v-else>支付中</text>
					</button>
					<button class="btn" hover-class="btn-hover" hover-start-time="1" hover-stay-time="100"
						open-type="launchApp" :app-parameter="orderID" @launchapp="launchappSuccess"
						@error="launchAppError">取消支付</button>
				</view>
			</view>
		</view>
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :amount="money" titleWindow="请输入支付密码"
			titleAmount="支付购买商品" desc=" " descColor="#FB7B00" :needLog="true" :plaintext="false"
			@whenFullfilled="whenPwdReady" @shutDownPlugin="shutDownPlugin">
		</rudon-payWithPassword>
	</view>
</template>

<script setup>
import getLoction from "@/utils/getLoction";

	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onShow,
		onLoad,
	} from "@dcloudio/uni-app";
	import CryptoJS from 'crypto-js';
	let pluginShowing = ref(false)
	const id = ref('') //onload传入ID
	const money = ref('') //金额
	const key = ref(true) //数字键盘
	const notes = ref('') //备注
	const orderID = ref(true) //订单编号
	const butdsb = ref(false) //支付按钮禁用
	const code = ref('') //获取code
	const type = ref(0) //0微信 1支付宝 2微信公众号
	const newCode = ref(0) //0微信 1公众号
	const is_h5 = ref(0) //0 app 1 h5 2 微信小程序 3 微信公众号
	const gzhUrl = ref('') //公众号url
	const webView = ref(false) //判断是否为微博view
	const open_id = ref('')

	var moneyValue //onload传入金额
	var order = '' //onload传入订单编号
	var project = ''


	const data = reactive({
		id: "",
		logo: '',
		name: '',
		title: '',
		merchant: '',
		order: '',
		money: '',
	}) //admin/wxPay传入界面信息

	const {
		appContext
	} = getCurrentInstance();

	//将url参数解析为对象
	function parseUrlParams(url) {
		if (!url) {
			return {};
		}
		let URLjson = {};
		url.substring(url.indexOf('?') + 1)
			.trim()
			.split('&')
			.forEach(item => URLjson[item.split('=')[0]] = item.split('=')[1]);

		return URLjson;
	}

	onLoad((option) => {
		console.log(option, "option")
		uni.removeStorageSync('paymenturl')
		data.id = option.id
		data.logo = option.logo
		data.name = option.name
		data.title = option.title
	})
	onShow(() => {
		console.log("onShow")
    const {fullPath}=getLoction()
		uni.setStorageSync('paymenturl', fullPath)

		// getinfo()
	})
	//获取界面信息
	function getinfo() {
		appContext.config.globalProperties.$request({
			url: `api/shopInfo/?id=${data.id}`,
			method: 'GET',
			success: (res) => {
				if (res.errno == 0) {
					console.log("Pay商家信息：", res.data)
					data.logo = res.data.shop_head
					data.name = res.data.name
					data.title = res.data.province + res.data.city + res.data.area + res.data.address
				}
			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title: '获取支付信息失败',
					duration: 1500,
				})
			}
		})
	}
	//支付
	function whenPwdReady(e) {
		appContext.config.globalProperties.$request({
			url: `api/scanPay/`,
			method: 'POST',
			data: {
				business_id: data.id,
				user_notes: notes.value,
				// password:e,
				money: parseFloat(money.value),
			},
			success: (res) => {
				pluginShowing.value = false
				butdsb.value = false
				key.value = true
				// uni.showToast({
				// 	icon: 'none',
				// 	title: res.errmsg,
				// })
				if (res.errno == 0) {
					// setTimeout(() => {
					// 		uni.switchTab({
					// 			url:'/pages/personal/index'
					// 		})
					// },1000)

					data.merchant = res.data.id
					data.order = res.data.order
					data.money = res.data.money
					console.log(res, "res")
					window.location.href =
						`https://tool.guanxikeji.com/scan?merchant=${data.merchant}&order=${data.order}&money=${data.money}`
				} else {
					uni.showToast({
						icon: 'none',
						title: res.errmsg,
					})
				}


			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title: '获取支付信息失败',
					duration: 1500,
				})
			}
		})
	}
	//取消支付
	function shutDownPlugin() {
		pluginShowing.value = false
		butdsb.value = false
		key.value = true
	}
	// 获取url参数code方法
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
		var context = "";
		if (r != null) context = r[2];
		reg = null;
		r = null;
		return context == null || context == "" || context == "undefined" ?
			"" :
			context;
	}
	// xcx解码base64
	// function base64Decode(str) {
	// 	let obj = new Buffer.from(str, 'base64');
	// 	return obj.toString();
	// }
	//隐藏数字键盘
	function hidKey() {
		key.value = false
		console.log("隐藏数字键盘:", key.value)
	}
	// 显示数字键盘
	function getKey() {
		key.value = true
		console.log("显示数字键盘:", key.value)
	}

	//取消支付
	function launchAppError(e) {
		console.log("取消支付", e)
		uni.showToast({
			icon: 'none',
			title: e.detail.errMsg
		})
	}
	//防抖节流↓↓↓
	function debounce(fn, delay) {
		let timer = null;
		return function() {
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				fn.apply(this, arguments);
			}, delay);
		};
	}
	const FDpay = debounce(function() {
		//内容
	}, 500);
	//防抖节流方案↑↑↑





	// 传给后端的取消支付
	function postFail() {
		appContext.config.globalProperties.$request({
			url: `/admin/cancellationPay/`,
			method: 'POST',
			data: {
				id: id.value,
			},
			success: (res) => {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '支付取消',
				// 	duration: 1500,
				// })
			},

		})
	}

	// 调起微信支付
	function pay() {
		butdsb.value = true //禁用支付按钮
		key.value = false
		if (!notes.value) {
			notes.value = ''
		}
		// 获取后端回调并完成支付
		// pluginShowing.value = true
		appContext.config.globalProperties.$request({
			url: `api/scanPay/`,
			method: 'POST',
			data: {
				business_id: data.id,
				user_notes: notes.value,
				// password:e,
				money: parseFloat(money.value),
				pay_type: 1
			},
			success: (res) => {
				console.log(res, "res")
				pluginShowing.value = false
				butdsb.value = false
				key.value = true
				// uni.showToast({
				// 	icon: 'none',
				// 	title: res.errmsg,
				// })
				if (res.errno == 0) {
					// setTimeout(() => {
					// 		uni.switchTab({
					// 			url:'/pages/personal/index'
					// 		})
					// },1000)

					data.merchant = res.data.id
					data.order = res.data.order
					data.money = res.data.money
					console.log(res, "res")
					window.location.href =
						`https://tool.guanxikeji.com/scan?merchant=${data.merchant}&order=${data.order}&money=${data.money}`
				} else {
					uni.showToast({
						icon: 'none',
						title: res.errmsg,
					})
				}


			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title: '获取支付信息失败',
					duration: 1500,
				})
			}
		})

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F4F7;
	}

	.loding {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80vh;
		font-size: 40rpx;
		color: #777;
	}

	.container {
		box-sizing: border-box;
		margin: 0 25rpx;
		width: 700rpx;
		padding-top: 25rpx;

		.head {
			display: flex;
			height: 90rpx;

			.image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 10px;

				image {
					border-radius: 10px;
					width: 100%;
					height: 100%;
				}
			}

			.title {
				// display: flex;
				height: 80rpx;
				margin-left: 20rpx;

				.name {}

				.info {
					display: flex;

					.icon {
						border-radius: 4px;
						background-color: #ccc;
						font-size: 12px;
						text-align: center;
						width: 70rpx;
						color: #fff;
						height: 40rpx;
						line-height: 40rpx;
						margin: 6rpx 6rpx 6rpx 0;
					}

					.text {
						font-size: 12px;
						height: 40rpx;
						line-height: 50rpx;
						color: #777;
					}
				}
			}

		}

		.pay {
			background: #fff;
			margin-top: 30rpx;
			padding: 15rpx 20rpx;
			border-radius: 10px;
			box-shadow: 0rpx 4rpx 24rpx 2rpx rgba(0, 128, 204, 0.06);

			.input1 {
				font-size: 25px;
				margin-top: 10rpx;
			}

			.hr {
				height: 1px;
				background-color: #eee;
				margin-bottom: 20rpx;
			}

			.input-bz {
				z-index: 999;

				.Input {
					caret-color: #1AAD19;
					width: 100%;
				}

				.text {
					color: #D3D3D3;
				}

				margin-bottom: 10rpx;
			}

			.orderID {
				color: #c1c1c1;
				vertical-align: bottom;
				font-size: 12px;
				margin-top: 10rpx;

			}
		}

		.key {
			background-color: #fff;
			display: flex;
			position: fixed;
			flex-wrap: wrap;
			justify-content: center;
			width: 750rpx;
			margin-left: -25rpx;
			bottom: 0;

			.but {
				font-size: 22px;
				font-weight: bold;
				width: 230rpx;
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				border: 1rpx solid #eee;
			}
		}

		.pop {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.noPop {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin: 180rpx 30rpx 0 30rpx;

				.bottoms {
					text-align: center;
					line-height: 80rpx;
					color: #fff;
					font-weight: 700;
					width: 400rpx;
					height: 80rpx;
					background: #1AAD19;
					border-radius: 7px;
				}

				.bottoms-hover {
					background: #2BA245;
				}

				.btn {
					margin-top: 50rpx;
					width: 400rpx;
					height: 80rpx;
					line-height: 76rpx;
					font-weight: 700;
					border: 1px solid #1AAD19;
					color: #1AAD19;
					background-color: #fff;
					border-radius: 7px;
					// font-size: 30rpx;
				}

				.btn-hover {
					background: #f0f0f0;
					color: #1AAD19;
				}
			}

		}
	}
</style>
